<!DOCTYPE html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>i movie</title>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui-v2.5.6/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/iconfont/iconfont.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/nprogress.css">
    <style>
        .div_imgall {
            width: 100px;
            height: 100px;
            position: relative;
        }
        .input_flie {
            display: block;
            width: 100%;
            height: 100%;
            opacity: 0;
            z-index: 100;
            position: absolute;
            left: 0;
            top: 0;
        }
        .pre-pic{
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
        }
    </style>
    <script>
        function showImg(obj) {
            let file=$(obj)[0].files[0];    //获取文件信息
            let imgdata='';
            if(file)
            {
                let reader=new FileReader();  //调用FileReader
                reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
                reader.onload=function(evt){   //读取操作完成时触发。
                    $("#preImg").attr('src',evt.target.result)  //将img标签的src绑定为DataURL
                };
            }
            else{
                alert("上传失败");
            }
        }
    </script>
</head>
<body>
<input type="text" name="title" id="title" required  lay-verify="required" placeholder="输入电影进行搜索" autocomplete="off" class="layui-input" style="width: 500px;display: inline-block">
<button class="layui-btn layui-btn-primary" id="search">搜索</button>
<table class="layui-table">
    <colgroup>
        <col width="150">
        <col width="200">
        <col width="200">
        <col width="200">
        <col width="200">
    </colgroup>
    <thead>
    <tr>
        <th>电影名</th>
        <th>地址</th>
        <th>联系方式</th>
        <th>海报</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="userList">
    <c:forEach items="${cinemas.list}" var="item">
        <tr>
            <td>${item.name}</td>
            <td>${item.address}</td>
            <td>${item.phone}</td>
            <td><img src="${item.cover}" style="width: 70px">
            </td>
            <td><button class="layui-btn layui-btn-normal" onclick="changeStatus(${item.id})">修改</button>
                <a class="layui-btn layui-btn-normal" href="${pageContext.request.contextPath}/backend/movie/session?id=${item.id}">查看场次</a>
            </td>
        </tr>
    </c:forEach>
    </tbody>
</table>
<nav style="text-align: center">
    <ul class="detail-pager" id="pagination" ></ul>
    <ul class="detail-pager" id="pagination1" ></ul>
</nav>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <form class="layui-form" action="">
            <input type="hidden" id="id" name="id">
            <div class="modal-content">
                <form class="layui-form" action="">
                    <input type="hidden" id="ids" name="id">
                    <div class="layui-form-item">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-block">
                            <div class="layui-inline">
                                <select  name="city" required lay-verify="required" id="city" lay-filter="city">
                                    <option value="">城市</option>
                                    <c:forEach items="${citys}" var="item">
                                        <option value="${item.city_id}">${item.city_name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                            <div class="layui-inline">
                                <select  name="area" required lay-verify="required" id="area">
                                    <option value="">地区</option>

                                </select>
                            </div>
                            <div class="layui-inline">
                                <select  name="brand" required lay-verify="required" id="brand">
                                    <option value="">品牌</option>
                                    <c:forEach items="${years}" var="item">
                                        <option value="${item.year_id}">${item.year_name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                            <div class="layui-inline">
                                <select  name="type" required lay-verify="required" id="type">

                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required id="name" lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">地址</label>
                        <div class="layui-input-block">
                            <input type="text" name="address" id="address" required  lay-verify="required" placeholder="请输入地址" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item" >
                        <label class="layui-form-label" style="width: 100px">联系方式</label>
                        <div class="layui-input-block">
                            <input type="text" name="phone" id="phone" required  lay-verify="required" placeholder="请输入地址" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label form-label" style="width: 100px">封面</label>
                        <div class="layui-input-block">
                            <div class="layui-inline">
                                <div class="div_imgall">
                                    <input class="input_flie" type="file" onchange="showImg(this)"  id="avatar">
                                    <div>
                                        <img src="http://127.0.0.1:8088/add.png" class="pre-pic" id="preImg"/><br>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </form>
    </div>
</div>
<script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/layui-v2.5.6/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/js/nprogress.js"></script>
<script src="${pageContext.request.contextPath}/js/dayjs.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-paginator.js"></script>
<script src="${pageContext.request.contextPath}/js/template-web.js"></script>
<script>
    $(function () {
        layui.use(['table','layer'], function() {
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            $('#search').click(function () {
                if($('#title').val()==''){
                    layer.msg('输入关键词');
                }else{
                    NProgress.start();
                    $('#pagination').remove();
                    $.ajax({
                        url:'${pageContext.request.contextPath}/backend/movie/searchCinema',
                        dataType: "json",
                        type:'POST',
                        data:{username:$('#title').val()},
                        success:function (data) {
                            NProgress.done();
                            var html = template('temp1',{list:data.data.list});
                            $('#userList').html(html);
                            if(data.data.total!=0){
                                //$('#footer').removeClass('fix');
                                $('#pagination1').show();
                                $('#pagination1').bootstrapPaginator({
                                    //主版本号
                                    bootstrapMajorVersion: 3,
                                    //当前页
                                    currentPage: data.data.pageNum,
                                    //总页数
                                    totalPages: data.data.pages,

                                    //显示分页条信息
                                    itemTexts: function (type, page, current) {
                                        switch (type) {
                                            case "first":
                                                return "首页";
                                            case "prev":
                                                return "上一页";
                                            case "next":
                                                return "下一页";
                                            case "last":
                                                return "尾页";
                                            case "page":
                                                return page;
                                        }
                                    },
                                    onPageClicked:function (event, originalEvent, type, page) {
                                        $.ajax({
                                            url:'${pageContext.request.contextPath}/backend/movie/searchCinema',
                                            async:true,
                                            data:{username:$('#title').val(),pageNum:page},
                                            dataType: "json",
                                            type:'POST',
                                            success:function (data) {
                                                var html = template('temp1',{list:data.data.list});
                                                $('#userList').html(html);
                                                NProgress.done();
                                            }
                                        })
                                    },
                                });
                            }else{
                                $('#pagination1').hide();
                                $('#userList').html('<div style="margin-left: 30px;margin-top: 30px">暂无数据</div>');
                            }
                        }
                    })
                }
            })
            form.on('submit(formDemo)', function (data) {
                NProgress.start();
                var formData = new FormData();
                formData.append('avatar', $('#avatar')[0].files[0]);
                formData.append('city',data.field.city);
                formData.append('area',data.field.area);
                formData.append('name',data.field.name);
                formData.append('brand',data.field.brand);
                formData.append("type",data.field.type);
                formData.append('address',data.field.address);
                formData.append('phone',data.field.phone);
                formData.append('id',data.field.id);
                $.ajax({
                    url:'${pageContext.request.contextPath}/backend/movie/updateCinema',
                    dataType: "json",
                    async:true,
                    contentType: false,
                    processData: false,
                    type:'POST',
                    data:formData,
                    success:function (data) {
                        if(data.status===1) {
                            NProgress.done();
                            layer.msg('修改成功',function () {
                                window.location.reload();
                            });
                        }
                    }
                });
                return false;
            });
            form.on('select(city)',function (data) {
                $.ajax({
                    url:'${pageContext.request.contextPath}/backend/movie/data',
                    dataType: "json",
                    async:true,
                    data:{id:data.value},
                    success:function (data) {
                        console.log(data);
                        var html = template('temp11',{list:data.data.cinemaAreaList});
                        $('#area').append(html);
                        var html1 = template('temp2',{list:data.data.cinemaBrandList});
                        $('#brand').append(html1);
                        var html2 = template('temp3',{list:data.data.cinemaTypeList});
                        $('#type').append(html2);
                        form.render();
                    }

                })
            })
        });
        if((${cinemas.total})==0){
            $('#pagination').hide();
            $('#userList').html('<div style="margin-left: 30px;margin-top: 30px">暂无数据</div>');
        }else{
            $('#pagination').bootstrapPaginator({
                //主版本号
                bootstrapMajorVersion: 3,
                //当前页
                currentPage: ${cinemas.pageNum},
                //总页数
                totalPages: ${cinemas.pages},
                //请求url
                pageUrl: function (type, page, current) {
                    return '${pageContext.request.contextPath}/backend/movie/cinemaEdit?pageNum='+page;
                },
                //显示分页条信息
                itemTexts: function (type, page, current) {
                    switch (type) {
                        case "first":
                            return "首页";
                        case "prev":
                            return "上一页";
                        case "next":
                            return "下一页";
                        case "last":
                            return "尾页";
                        case "page":
                            return page;
                    }
                },
            });
        }

    })
    function changeStatus(id) {
        console.log(id);
        $('#ids').val(id);
        $.ajax({
            url:'${pageContext.request.contextPath}/backend/movie/cinema/'+id,
            async:true,
            dataType: "json",
            type:'POST',
            success:function (data) {
                console.log(data);
                $('#myLargeModalLabel').modal('show');
                var select = 'dd[lay-value=' +data.data.citys+ ']';
                $('#city').siblings("div.layui-form-select").find('dl').find(select).click();
                var select1 = 'dd[lay-value=' +data.data.area+ ']';
                $('#area').siblings("div.layui-form-select").find('dl').find(select1).click();
                var select2 = 'dd[lay-value=' +data.data.brand+ ']';
                $('#brand').siblings("div.layui-form-select").find('dl').find(select2).click();
                var select3 = 'dd[lay-value=' +data.data.type+ ']';
                $('#type').siblings("div.layui-form-select").find('dl').find(select3).click();
                $('#name').val(data.data.name);
                $('#address').val(data.data.address);
                $('#phone').val(data.data.phone);
                $('#preImg').attr('src',data.data.cover);
            }
        })
    }
</script>
<script type="text/html" id="temp1">
    {{each list item index}}
    <tr>
        <td>{{item.name}}</td>
        <td>{{item.address}}</td>
        <td>{{item.phone}}</td>
        <td><img src="{{item.cover}}" style="width: 70px">
        </td>
        <th><button class="layui-btn layui-btn-normal" onclick="changeStatus({{item.id}})">修改</button></th>
    </tr>
    {{/each}}
</script>
<script type="text/html" id="temp11">
    {{each list item index}}
    <option value="{{item.id}}">{{item.district}}</option>
    {{/each}}
</script>
<script type="text/html" id="temp2">
    {{each list item index}}
    <option value="{{item.id}}">{{item.brand}}</option>
    {{/each}}
</script>
<script type="text/html" id="temp3">
    {{each list item index}}
    <option value="{{item.seat_type}}">{{item.seat_type}}</option>
    {{/each}}
</script>
</body>
</html>
